<template>
	<z-nav-bar title="问题详情"></z-nav-bar>
	<view class="content">
		<view class="flex_sbc">
			<view class="text-w z-font-32">{{ questionDetials.name }}</view>
			<view class="edit-button" @click="editQuestionPage">编辑</view>
		</view>
		<view class="text-w z-font-32 uni-mt-40">描述</view>
		<view class="uni-585C66 uni-mt-12">{{ questionDetials.description }}</view>
		<z-preview-media :srcStr="questionDetials.material"></z-preview-media>
		<view class="text-w z-font-32 uni-mt-40 uni-mb-24">问题效果描述</view>
		<view>
			<view v-for="(item, index) in questionDetials.descriptionTagName.split(',')" :key="index" class="effect-tag tag" :class="{'uni-mt-16': index}">{{ item }}</view>
		</view>
	</view>
	<view v-if="questionDetials.schemeList && questionDetials.schemeList.length" class="solution-box">
		<view class="z-font-32 text-w">解决方案</view>
		<view v-for="(scheme, si) in questionDetials.schemeList || []" :key="scheme.id">
			<view class="title flex_sbc">
				<view>{{ si + 1 }}.{{ scheme.name }}</view>
			</view>
			<view class="flex_fsc uni-mt-32">
				<view class="line"></view>
				<view class="z-font-32">指导教学</view>
			</view>
			<view class="uni-585C66 uni-mt-12">{{ scheme.description }}</view>
			<z-preview-media :srcStr="scheme.material"></z-preview-media>
		</view>
	</view>
	<bottom-box :buts="buts" @change="butsFun"></bottom-box>
	<uni-popup ref="select" :is-mask-click="false" type="center">
		<view class="popup-box">
			<image
				:src="setting.oss_pub_domain + '/app-img/icon/close.png'"
				class="icon-size post"
				@click="select.close()"
			></image>
			<view v-if="popType">
				<view class="item" @click="toScheme">新建解决方案</view>
				<view class="item uni-mt-32" @click="associatedSolution">选择原有解决方案</view>
			</view>
			<view v-else>
				<view class="item" @click="toCourse">新建课程</view>
				<view class="item uni-mt-32" @click="addCourse">添加到原有课程</view>
			</view>
		</view>
	</uni-popup>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog
			type="info"
			cancelText="关闭"
			confirmText="已解决"
			title="提示"
			content="该问题确定已解决吗？"
			@confirm="dialogConfirm"
		></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import { editQuestion, getPlayerQuestionDetail } from '@/api/question.js';
import { addCoursePlan, editCoursePlan, editPlayerQuestion } from '@/api/player.js';
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
const { proxy: that } = getCurrentInstance();
const eventChannel = that.getOpenerEventChannel();

const questionDetials = reactive(uni.getStorageSync('edit-question')),
	playerInfo = uni.getStorageSync('player-info');
fetchData();
function fetchData() {
	getPlayerQuestionDetail(questionDetials.id).then((res) => {
		if (res.schemeList)
			res.schemeList.forEach((item) => {
				if (item.material) item.materialList = item.material.split(',');
			});
		Object.assign(questionDetials, res);

		console.log(questionDetials);
	});
}

const buts = reactive([
		{
			label: '添加到课程',
			bgColor: 'uni-orange-bg',
			width: 200
		},
		{
			label: '关联解决方案',
			bgColor: 'uni-color-main-bg',
			width: 230
		},
		{
			label: '解决问题',
			bgColor: 'uni-color-main-bg',
			width: 200
		}
	]),
	popType = ref(0);

if (questionDetials.status == 1) buts.splice(2, 1);
function butsFun(e) {
	if (e == 2) {
		alertDialog.value.open();
	} else {
		uni.setStorageSync('questionCopy', questionDetials)
		popType.value = e;
		select.value.open();
	}
}

const alertDialog = ref();
function dialogConfirm() {
	editPlayerQuestion({ status: 1 }, questionDetials.id).then((res) => {
		questionDetials.status = 1;
		if (buts.length === 3) buts.splice(2, 1);
		eventChannel.emit('change');
	});
}

const select = ref();

function toScheme() {
	uni.removeStorageSync('edit-scheme');
	select.value.close()
	uni.navigateTo({
		url: '/pages/scheme/add/add?select=1',
		events: {
			editDone: data => {
				editPlayerQuestion({ relScheme: `${questionDetials.relScheme},${data.id}`.slice(1,) }, questionDetials.id).then((res) => {
					that.tools.alert('关联完成');
					fetchData()
					select.value.close();
				});
			}
		}
	});
}
function toCourse() {
	uni.removeStorageSync('edit-course');
	select.value.close()
	uni.navigateTo({
		url: '/pages/player/course/course-edit'
	});
}

function associatedSolution() {
	uni.setStorageSync('select-scheme', questionDetials.schemeList || []);
	uni.navigateTo({
		url: '/pages/scheme/course-select/course-select',
		events: {
			relScheme(data) {
				editPlayerQuestion({ relScheme: data.map((item) => item.id).join(',') }, questionDetials.id).then((res) => {
					that.tools.alert('关联完成');
					fetchData()
					select.value.close();
				});
			}
		}
	});
}

function addCourse() {
	uni.setStorageSync('select-course', questionDetials.courseStudentList);
	uni.navigateTo({
		url: '/pages/course/select/selects-single?type=1&multiple=1',
		events: {
			relCourse(data) {
				editPlayerQuestion(
					{ relCourse: data.map((item) => item.id).join(','), stuId: playerInfo.id },
					questionDetials.id
				).then((res) => {
					that.tools.alert('添加成功');
					select.value.close();
				});
			}
		}
	});
}

function editQuestionPage() {
	uni.navigateTo({
		url: '/pages/question/edit/edit?type=1',
		events: {
			editDone() {
				eventChannel.emit('change');
				fetchData();
			},
			deleteDone() {
				eventChannel.emit('change');
				uni.navigateBack();
			}
		}
	});
}
</script>

<style lang="scss" scoped>
@import 'details.scss';
</style>
